<!DOCTYPE html>
<html ng-app="myModule" ng-controller="checkController">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.css-class-add, .css-class-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.css-class,
.css-class-add.css-class-add-active {
  color: red;
  font-size:3em;
}

.css-class-remove.css-class-remove-active {
  font-size:1.0em;
  color:black;
}
		</style>
	</head>
	<body>
		 <p>
  <input type="button" value="set" ng-click="myCssVar='css-class'">
  <input type="button" value="clear" ng-click="myCssVar=''">
  <br>
  <span ng-class="myCssVar">CSS-Animated Text</span>
</p>
	</body>
	<script type="text/javascript" src="../js/angular.js" ></script>
	<script>
		var myModule = angular.module('myModule', []);
		myModule.directive('my-directive', ['$animate', function($animate) {
  return function(element, scope, attrs) {
    element.on('click', function() {
      if(element.hasClass('clicked')) {
        $animate.removeClass(element, 'clicked');
      } else {
        $animate.addClass(element, 'clicked');
      }
    });
  };
}]);
	
		
		
		
		
	</script>
</html>
